<?php
declare(strict_types=1);
require_once __DIR__ . '/../includes/auth.php';

$con = mysqli_connect("localhost","root","","mydatabase");

if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

  date_default_timezone_set("Asia/Manila"); 




$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    verify_csrf();
    $email = $_POST['email'] ?? '';
    $password = $_POST['password'] ?? '';
    //role = $_POST['role'] ?? '';

    if (auth_login($email, $password)) {
		
		
		
		$query=mysqli_query($con,"select * from users where email='$email'")or die(mysqli_error($con));
	    $row=mysqli_fetch_array($query);
           $role=$row['role'];
          
		
	   echo "<script type='text/javascript'>document.location='/jo_cos_system/$role/dashboard.php'</script>";
        //header('Location: /jo_cos_system/public/dashboard.php');
        exit;
    } else {
        $error = 'Invalid email, password.';
    }
}

$msg = $_GET['msg'] ?? '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JO & COS PRMS | Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="assets/img/logo.png">
  <!-- Bootstrap & Fonts -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  <style>
    body {
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-box {
      width: 400px;
    }
    .card {
      border-radius: 15px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
      border: none;
    }
    .card-body {
      padding: 2rem;
    }
    .login-logo {
      text-align: center;
      margin-bottom: 1rem;
    }
    .login-logo img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: #fff;
      padding: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .login-title {
      text-align: center;
      font-weight: bold;
      font-size: 1.3rem;
      color: #2c5364;
      margin-top: 0.8rem;
      margin-bottom: 1.5rem;
    }
    .login-box-msg {
      font-size: 1rem;
      margin-bottom: 1.2rem;
      color: #6c757d;
      text-align: center;
    }
    .form-control, .input-group-text, select {
      border-radius: 8px !important;
    }
    .btn-primary {
      background: #2c5364;
      border: none;
      border-radius: 8px;
      transition: 0.3s ease;
    }
    .btn-primary:hover {
      background: #203a43;
    }
    .alert {
      font-size: 0.9rem;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="login-box">
  <div class="card">
    <div class="card-body login-card-body">
      
      <!-- Logo -->
      <div class="login-logo">
        <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="System Logo">
      </div>
      <div class="login-title">JO & COS RMS</div>
      <p class="login-box-msg">Sign in to start your session</p>

      <!-- Messages -->
      <?php if ($error): ?>
        <div class="alert alert-danger py-2"><?= htmlspecialchars($error) ?></div>
      <?php elseif ($msg === 'logout'): ?>
        <div class="alert alert-success py-2">You have been logged out.</div>
      <?php elseif ($msg === 'login_required'): ?>
        <div class="alert alert-warning py-2">Please login to continue.</div>
      <?php endif; ?>

      <!-- Form -->
      <form method="post" autocomplete="off" novalidate>
        <?= csrf_field(); ?>
        <div class="input-group mb-3">
          <input type="text" name="email" class="form-control" placeholder="Username" required>
          <div class="input-group-append">
            <div class="input-group-text"><span class="fas fa-envelope"></span></div>
          </div>
        </div>

        <div class="input-group mb-3">
          <input type="password" name="password" class="form-control" placeholder="Password" required>
          <div class="input-group-append">
            <div class="input-group-text"><span class="fas fa-lock"></span></div>
          </div>
        </div>

       <!--  <div class="input-group mb-4">
          <select name="role" class="form-control" required>
            <option value="" disabled selected>Select Role</option>
            <option value="staff">Staff</option>
            <option value="admin">Admin</option>
          </select>
          <div class="input-group-append">
            <div class="input-group-text"><span class="fas fa-user"></span></div>
          </div>
        </div> -->

        <button type="submit" class="btn btn-primary btn-block py-2">
          Sign In <i class="fas fa-sign-in-alt ml-1"></i>
        </button>
      </form>

    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
